<template>
  <div class="post-card" @click="emit('enter-post')">
    <div class="post-card-left">
      <img class="post-card-avater" :src="avater != null ? avater : defaultIcon"/>
    </div>
    <div class="post-card-right">
      <a-dropdown>
        <EllipsisOutlined class="more-operations"></EllipsisOutlined>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1">
              删除
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <div class="post-card-infoline">
        <span class="post-card-name">{{name}}</span>
        <span class="post-card-time">@{{useDateToString(new Date(time))}}</span>
      </div>
      <div class="post-card-message">
        <slot></slot>
        <p class="message-body" @click.stop="">
            {{postMessage}}
        </p>
        <a v-if="canTranslate" @click.stop="toggleTranslation" style="display:inline-block; user-select: none; margin-bottom: 10px;">
          {{translationButtonLabel}}
        </a>
    
        <div v-if="canTranslate && isTranslationShow && isTranslated" class="translated-message-body">
          <p>由<a style="color: #e00012" href="https://fanyi.youdao.com" target="_blank">有道翻译</a>提供支持</p>
          <p>{{translatedMessage}}</p>
        </div>

        <ImageGroup v-if="type=='images'" :images="resources"></ImageGroup>
        <p v-else>这里应该是一个视频组件，但是我还没写</p>
      </div>

      <PublishedThingOperationsBar 
        :reply-count="replyCount"
        :like-count="likeCount"
        :dose-i-liked-it="doseILikedIt"
        @like-clicked="emit('like-post')"
        @unlike-clicked="emit('unlike-post')"
        @reply-clicked="emit('send-reply')"
      ></PublishedThingOperationsBar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import defaultIcon from "@assets/imgs/g.jfif?url";
import { EllipsisOutlined } from '@ant-design/icons-vue';
import useDateToString from '@composable/useDateToString';
import { ref, computed } from "vue";
import useTranslationApi from '@composable/translation-api';
import { message } from "ant-design-vue";
import 'ant-design-vue/es/message/style/css';
import ImageGroup from "@components/public/ImageGroup.vue";
import PublishedThingOperationsBar from "@components/public/PulishedThingOperationsBar.vue";


const props = defineProps({
  avater: {
    type: String,
    default: defaultIcon
  }, 
  name: {
    type: String,
    default: "UNKNOWN"
  },
  time: {
    type: String,
    default: new Date()
  },
  updateTime: {
    type: String,
    default: new Date()
  },
  postMessage: {
    type: String,
    default: "If you were a teardrop in my eye. For fear of losing you,I would never cry.And if the golden sun,Should cease to shine its light.Just one smile from you,Would make my whole world bright."
  },
  type: {
    type: String,
    default: "images"
  },
  // resources格式： [ {url: 'xxx', previewUrl: 'xxx'} ]
  resources: {
    type: Array,
    default: []
  },
  replyCount: {
    type: Number,
    default: 0
  },
  likeCount: {
    type: Number,
    default: 0
  },
  doseILikedIt: {
    type: Boolean,
    default: false
  },
  canTranslate: {
    type: Boolean,
    default: true
  }
});

const { t } = useI18n();
const { translate } = useTranslationApi();

const isTranslationShow = ref(false);
const isTranslated = ref(false);
const isTranslating = ref(false);
const translatedMessage = ref('');

const emit = defineEmits(['delete-post', 'like-post', 'unlike-post','enter-post', 'send-reply'])
const handleMenuClick = (key) => {
  emit('delete-post');
}

const translationButtonLabel = computed(() => {
  if (isTranslationShow.value) return t('operations.closePostTranslation');
  else if(isTranslated.value) return t('operations.showPostTranslation');
  else {
    return t('operations.translatePost');
  }
});

const toggleTranslation = () => {
  // 正在翻译 退出方法
  if (isTranslating.value) return;
  // 未翻译过，调用api翻译
  if (!isTranslated.value) {
    isTranslating.value = true;
    translate(props.postMessage).then(res => {
      // 翻译成功
      isTranslated.value = true;
      isTranslationShow.value = true;
      translatedMessage.value = res;
    }).catch(e => {
      message.error(`翻译失败: ${e}`);
    }).finally(()=>isTranslating.value = false);
  } else {
    // 已经翻译过，只需要修改isTranslationShow的值即可
    isTranslationShow.value = !isTranslationShow.value;
  }
}

</script>

<style scoped>
.post-card {
  display: flex;
  flex-direction: row;
  border-bottom: #eee 0.5px solid;
  padding: 10px 15px;
  cursor: pointer;
}
.post-card:hover {
  background-color: #f7f7f7;
}
.post-card-avater {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.post-card-right {
  padding-left: 15px;
  position: relative;
  width: 100%;
}
.post-card-name {
  font-weight: bold;
}
.post-card-time {
  color: #bbb;
}

.message-body, .translated-message-body {
  cursor: text;

}


.more-operations {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}


</style>